<template>
  <div class="left-panel">
    <div class="left-top">
      <TopPart
        :pageConfig="pageConfig"
      />

    </div>
    <div class="left-center">
      <div class="left-center-top">
        <CenterPart
          :pageConfig="pageConfig"
        />
      </div>
      <div class="left-center-bar">
        <lineChart
          :pageConfig="pageConfig"
          @handleOpenChargeBack="handleOpenChargeBack"
        />
      </div>
    </div>
    <div class="left-bottom">
      <BottomPart 
        :pageConfig="pageConfig"
        @handleOpenTransfer="handleOpenTransfer"
      />
    </div>
    
    <!-- 退单量弹窗 -->
    <ChargeBackDetailInfo
      ref="chargeBackDetailInfo"
      :pageConfig="pageConfig"
    />

    <!-- 高频转办原因 -->
    <HighTransfer
      ref="highTransfer"
      :pageConfig="pageConfig"
    />

  </div>
</template>


<script>
import CustomTitle from '../components/CustomTitle.vue';
import TopPart from './TopPart.vue';
import CenterPart from './CenterPart.vue';
import lineChart from './lineChart.vue';
import BottomPart from './BottomPart.vue';
import  ChargeBackDetailInfo from '../DrillPages/ChargeBackDetailInfo.vue';
import HighTransfer from '../DrillPages/HighTransfer.vue';

export default {
  components: {
    CustomTitle,
    TopPart,
    CenterPart,
    lineChart,
    BottomPart,
    ChargeBackDetailInfo,
    HighTransfer,

  },
  props: {
    pageConfig: Object
  },
  data() {
    return {
      title1: '今日待办（制证环节）',
      dataList: [
        {
          name: '今日到达',
          count: 800,
          img: '../css/arrive-icon.png'
        },
        {
          name: '当前待办',
          count: 800,
          img: '../css/todo-icon.png'
        }

      ]
    }
  },
  methods: {
    handleOpenChargeBack(name) {
      this.$refs.chargeBackDetailInfo.handleOpen(name);
    },
    handleOpenTransfer(name) {
      this.$refs.highTransfer.handleOpen(name);
    },


  }

}
</script>
<style lang="scss" scoped>
  .left-panel{
    height: 100%;
    .left-top{
      height: 20%;
    }
    .left-center{
      height: 45%;
      .left-center-top {
        height: 100px;
      }
      .left-center-bar {
        height: calc(100% - 100px);
      }
    }
    .left-bottom{
      height: 35%;
    }
  }
  // 2K
  @media screen and (max-width: 2560px) {
  .left-panel{
      .left-center{
        .left-center-top {
          height: 140px;
        }
        .left-center-bar {
          height: calc(100% - 140px);
        }
      }
    }
    
  }
  // 全高清屏幕
  @media screen and (max-width: 1920px) {
    .left-panel{
      .left-center{
        .left-center-top {
          height: 100px;
        }
        .left-center-bar {
          height: calc(100% - 100px);
        }
      }
    }
  }
</style>